<template>
  <Dropdown @on-click="handleClick" placement="right-start">
    <span class="drop-menu-span" :style="titleStyle">
      <Icon :color="iconColor" :type="parent.icon" :size="22"/>
      <span v-if="showTitle">{{parent.title}}</span>
    </span>
    <DropdownMenu  slot="list">
      <template v-for="item in parent.children">
        <re-dropdown v-if="item.children" 
        :key="`drop_${item.name}`"
        :parent='item'
        >
        </re-dropdown>
        <DropdownItem v-else 
        :key="`drop_${item.name}`"
        :name="item.name"
        >
          <Icon color="#515a6e" :type="item.icon" :size="22"/>
          {{item.title}}
        </DropdownItem>
      </template>
    </DropdownMenu >
  </Dropdown >
</template>
<script>
export default {
  name:'ReDropdown',
  props:{
    parent:{
      type:Object,
      default:()=>({})
    },
    iconColor:{
      type:String,
      default:'#515a6e'
    },
    showTitle:{
      type:Boolean,
      default:true
    }
  },
  computed:{
    titleStyle(){
      return{
        textAlign: this.showTitle ? 'left' : 'center',
        paddingLeft: this.showTitle ? '16px': ''
      }
    }
  },
  methods:{
    handleClick (name){
      // 如果当前是第一级
      if(!this.showTitle) this.$emit("on-select",name)
    }
  }
}
</script>
<style lang="less">

</style>

